Add Charts into Our React App with Nivo — Parallel Coordinates Chart

The Victory lets us add charts and data visualization into our React app.

In this article, we’ll look at how to add charts into our React app with Nivo.

Parallel Coordinates Chart

Nivo comes with code to let us add a parallel coordinates chart into our React app.

To install the required packages, we run:

npm i @nivo/parallel-coordinates

Then we can add the chart by writing:

import React from "react";
import { ResponsiveParallelCoordinates } from "@nivo/parallel-coordinates";

const data = [
  {
    temp: 24,
    cost: 32344,
    color: "green",
    target: "D",
    volume: 3.32478102470854
  },
  {
    temp: 19,
    cost: 100448,
    color: "green",
    target: "E",
    volume: 5.052307538977317
  },
  {
    temp: 32,
    cost: 266169,
    color: "yellow",
    target: "D",
    volume: 4.657311172596244
  },
  {
    temp: 8,
    cost: 84370,
    color: "green",
    target: "D",
    volume: 0.6268058953310531
  },
  {
    temp: 21,
    cost: 304422,
    color: "red",
    target: "D",
    volume: 3.3590163049771173
  },
  {
    temp: -7,
    cost: 152254,
    color: "yellow",
    target: "C",
    volume: 6.019571437532089
  },
  {
    temp: 3,
    cost: 241390,
    color: "red",
    target: "E",
    volume: 1.0655003648315398
  },
  {
    temp: 15,
    cost: 277920,
    color: "yellow",
    target: "C",
    volume: 0.700657465435478
  },
  {
    temp: 12,
    cost: 294237,
    color: "green",
    target: "B",
    volume: 5.221829062361729
  },
  {
    temp: 34,
    cost: 363216,
    color: "red",
    target: "A",
    volume: 1.9905418770819305
  },
  {
    temp: -5,
    cost: 347671,
    color: "green",
    target: "B",
    volume: 1.287223272665619
  }
];

const MyResponsiveParallelCoordinates = ({ data /* see data tab */ }) => (
  <ResponsiveParallelCoordinates
    data={data}
    variables={[
      {
        key: "temp",
        type: "linear",
        min: "auto",
        max: "auto",
        ticksPosition: "before",
        legend: "temperature",
        legendPosition: "start",
        legendOffset: 20
      },
      {
        key: "cost",
        type: "linear",
        min: 0,
        max: "auto",
        ticksPosition: "before",
        legend: "cost",
        legendPosition: "start",
        legendOffset: 20
      },
      {
        key: "color",
        type: "point",
        padding: 1,
        values: ["red", "yellow", "green"],
        legend: "color",
        legendPosition: "start",
        legendOffset: -20
      },
      {
        key: "target",
        type: "point",
        padding: 0,
        values: ["A", "B", "C", "D", "E"],
        legend: "target",
        legendPosition: "start",
        legendOffset: -20
      },
      {
        key: "volume",
        type: "linear",
        min: 0,
        max: "auto",
        legend: "volume",
        legendPosition: "start",
        legendOffset: -20
      }
    ]}
    margin={{ top: 50, right: 60, bottom: 50, left: 60 }}
  />
);

export default function App() {
  return (
    <div style={{ width: 400, height: 300 }}>
      <MyResponsiveParallelCoordinates data={data} />
    </div>
  );
}

We add the data array to store the data that we’ll render in our chart.

temp and const are the values.

color have the line colors.

variables have the lines.

key has the property name with the value for the line.

type has the type of line.

min and max have the min and max values. They are calculated automatically if we set them to 'auto' .

ticksPosition sets the tick position.

legend has the legend value.

legendPosition has the position of the legend item.

legendOffset has the legend offset.

margin have the margins.

In App , we render the chart by setting the width and height.

Conclusion

We can add a parallel coordinates chart easily into our React app with Nivo.